<template>
  <div class="box">
    <div class="info_box top_info animate__animated animate__backInLeft">
      <div class="input">
        <input type="checkbox" name="" id="" />
      </div>
      <div class="spid">商品ID</div>
      <div class="pic">商品图片</div>
      <div class="spbt">商品标题</div>
      <div class="sufl">商品分类</div>
      <div class="spjg">在售价</div>
      <div class="yuexiao">月销量</div>
      <div class="kucun">库存</div>
      <div class="caozuo">操作</div>
    </div>

    <div class="info_box animate__animated animate__backInLeft" v-for="item in date " >
      <div class="input">
        <input type="checkbox" name="" id="" />
      </div>
      <div class="spid">{{item.id}}</div>
      <div class="pic">
        <img
          :src="item.imag"
          alt=""
        />
      </div>
      <div class="spbt">{{item.xinxi}}</div>
      <div class="sufl">{{item.lei}}</div>
      <div class="spjg">￥<span>{{item.jiage}}</span>元</div>
      <div class="yuexiao">月销<span>{{suiji()}}</span>件</div>
      <div class="kucun">库存<span>{{suiji()}}</span>件</div>
      <div class="caozuo">
        <el-button size="mini" @click="sj(item.id)" type="primary" round>上架</el-button>
        <el-button size="mini" @click="sc(item.id)" type="success" round>删除</el-button>
        <el-button size="mini" @click="bj(item)" type="success" round>详情/编辑</el-button>
      </div>
    </div>
    <el-pagination
      background
      @current-change='fanye'
      layout="prev, pager, next"
      :total="40">
    </el-pagination>
  </div>
</template>

<script>

export default {
 
  props:['date'],
  methods:{
    // 上架
    sj(value){
      this.$emit('sj', value );
    },
    // 删除
    sc(value){
      this.$emit('sc', value );
    },
    // 编辑
    bj(value){
      this.$emit('bj', value );
    },
    // 翻页
    fanye(index){
      this.$emit('fanye', index-1);
    },
     suiji(){
            return parseInt(Math.random()*10000)
        }
  }

};
</script>

<style lang="scss" scoped>
.box {
  // background: #aaa;
  box-shadow: 0px 0px 5px #ddd;
  .info_box {
    text-align: center;
    display: flex;
    height: 80px;
    align-items: center;
    font-size: 14px;
    .input {
      width: 50px;
    }
    .spid {
      width: 150px;
    }
    .pic {
      height: 60px;
      width: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .spbt {
      width: 250px;
      max-height: 50px;
    }
    .sufl {
      width: 80px;
    }
    .spjg,
    .kucun,
    .yuexiao {
      flex: 1;
    }
    .caozuo {
      width: 250px;
    }
  }
  .top_info {
    height: 30px;
    .pic {
      height: 30px;
      line-height: 30px;
      width: 60px;
    }
  }
}
</style>